<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import Card from "@/components/Card/index.vue";
import titleConfig from "./missing.title";
import { useScanStore, useToastStore } from "@/store";
import Spin from "@/components/Spin/index.vue";
import blank from "@/static/images/blank.png";
import useScan from "@/hooks/useScan";
import { useMessage } from "wot-design-uni";
import { missingService } from "@/service/missing";

const message = useMessage();
const toastStore = useToastStore();

const listenScanRes = async (res) => {
	console.log(res);
	const rs = res.trim();
	const _index = list.value.findIndex((item) => item === rs);
	if (_index > -1) {
		handleDelete(_index);
		message.alert(`箱号为${rs}的数据已从缺件列表中移除`);
		// toastStore.set(`箱号为${rs}的数据已从缺件列表中移除`, "success");
		return;
	}
	// message.alert(`该数据未在${missing.getMain()}单号下`);
	toastStore.set(`该数据未在${missing.getMain()}单号下`, "warning");
};

const { loading } = useScan({
	scanCallback: listenScanRes,
	timeOutCallback: () => {
		// message.alert("未识别，请核对条形码是否正确");
		toastStore.set("未识别，请核对条形码是否正确", "warning");
	},
});

const { missing } = useScanStore();

const tableLoading = ref(false);

const list = ref([...missing.getList()]);

const handleDelete = (index) => {
	tableLoading.value = true;

	setTimeout(() => {
		const _d = list.value;
		_d.splice(index, 1);
		list.value = _d;
		tableLoading.value = false;
	}, 200);
};

// 返回
const handleBack = () => {
	uni.navigateBack();
};

// 确认
const handleConfirm = () => {
	missing.setList(list.value);
	uni.navigateBack();
};

watch(
	() => loading.value,
	(val) => {
		tableLoading.value = val;
	},
);

onMounted(async () => {
	const val = missing.getMain();
	console.log(val);
	if (val) {
		loading.value = true;
		try {
			const rs = await missingService.getBoxNumber(val);
			const fligthRs = await missingService.getFlightInfo(
				val,
			);

			if (rs && fligthRs) {
				list.value = rs;
			}
		} catch (error) {
			console.log(error);
		} finally {
			loading.value = false;
		}
	}
})

/* watch(() => missing.getMain(), async (val) => {
	console.log(val);
	if (val) {
		loading.value = true;
		try {
			const rs = await missingService.getBoxNumber(val);
			const fligthRs = await missingService.getFlightInfo(
				val,
			);

			if (rs && fligthRs) {
				list.value = rs;
			}
		} catch (error) {
			console.log(error);
		} finally {
			loading.value = false;
		}
	}

}, { immediate: true }) */
</script>

<template>
	<ViewContainer :title="titleConfig" innerClass="missing-scan-page">
		<Card class="missing-scan-card-container">
			<view class="tip">用户可以通过点击侧边的扫描按钮，排除主单下已有的箱子，从而确认少的箱号</view>

			<Spin :loading="tableLoading">
				<template v-if="list.length > 0">
					<view class="cus-table">
						<view class="header table-row">
							<view class="left">箱号</view>
							<div class="right">操作</div>
						</view>
						<view class="content">
							<view v-for="(item, index) in list" class="table-row" :key="item">
								<view class="left">{{ item }}</view>

								<template v-if="list.length > 1">
									<view class="right" @click="() => handleDelete(index)">删除</view>
								</template>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="blank">
						<wd-img :src="blank" class="blank-img" />
						<view class="text">暂无数据</view>
					</view>
				</template>
			</Spin>
		</Card>

		<view class="btn-group">
			<wd-button @click="handleBack" class="btn back" type="info" :round="false">返回</wd-button>
			<wd-button @click="handleConfirm" class="btn confirm" :round="false">确认</wd-button>
		</view>
	</ViewContainer>
</template>

<style lang="less" scoped>
.tip {
	font-size: 36px;
	color: red;
	margin-bottom: 30px;
}

:deep(.missing-scan-card-container) {
	padding: 40px 30px;
}

.blank {
	width: 80%;
	height: 500px;
	margin: 10px auto;
	padding-bottom: 50px;

	.blank-img {
		width: 100%;
		height: 100%;
	}

	.text {
		text-align: center;
		font-size: 35px;
		color: rgba(0, 0, 0, 0.45);
	}
}

.btn-group {
	display: flex;
	justify-content: center;
	margin: 50px 0;

	.btn {
		width: 45%;
		height: 100px;
	}
}

@import url("../../components/StorageForm/style/form.less");
</style>
